<template>
	<!-- 支付订单 -->
	<view class="bigbox">
		<!-- 头部支付金额 -->
		<view class="mt26 header">
			<view class="mb40 headertxt">支付金额（元）</view>
			<view class="headermoney">￥2206.00</view>
		</view>
		<!-- /头部支付金额 -->

		<view class="row-center flex mt80">
			<view class="payType">- 支付方式 -</view>
		</view>

		<view class="">
			<u-radio-group v-model="value" @change="radioGroupChange" wrap width='100%'>
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
						:disabled="item.disabled"
						>
						<view class="flex col-center radiobox">
							<image :src="item.img" class="w44 h44 mr20"></image>
							{{item.name}}
						</view>
					</u-radio>
			</u-radio-group>
		</view>
		
		<view class=" ml56 h86 paybtn">
			立即支付
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '支付宝',
						disabled: false,
						img:'/static/img/index/7pay-1.png'
					},
					{
						name: '微信支付',
						disabled: false,
						img:'/static/img/index/7pay-2.png'
					},
					{
						name: '钱包支付(可用：￥856）',
						disabled: false,
						img:'/static/img/index/7pay-3.png'
					},
					{
						name: '中国邮政银行（****6969）',
						disabled: false,
						img:'/static/img/index/7pay-youzheng.png'
					},
					{
						name: '中国建设银行（****5693）',
						disabled: false,
						img:'/static/img/index/7pay-jianshe.png'
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
			};
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.header {
		.headertxt {
			font-size: 24rpx;
			color: #0C162E;
		}

		.headermoney {
			font-size: 30rpx;
			color: #FD1D4D;
		}
	}

	.payType {
		font-size: 26rpx;
		font-weight: 500;
		color: #898989;
	}
	/deep/.u-radio {
		position: relative;
		border-bottom: 2rpx solid #D2DEEB;
		padding-bottom: 22rpx;
		margin-bottom: 50rpx;
	}
	/deep/.u-radio__icon-wrap {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.paybtn {
		position: fixed;
		bottom: 60rpx;
		left: 0;
		width: 85%;
		text-align: center;
		line-height: 86rpx;
		background: #1385FF;
		border-radius: 10rpx;
		color: #FFFFFF;
	}
</style>
